@import 'score_icon';

.adminbar-seo-score {
	margin: 10px 0 0 4px !important;
}

#wpadminbar {
	.yoast-issue-added,
	.yoast-issue-added:hover {
		position: absolute;
		top: 32px;
		left: 0;
		white-space: nowrap;
		padding: 2px 12px;
		border-radius: 0 10px 10px 10px;
		color: white;
		background-color: #a4286a;
		box-shadow: 1px 1px 1px 1px grey;
	}

	.yoast-issue-added {
		display: none;
	}

	.yoast-issue-counter {
		display: inline;
		padding: 1px 7px 1px 6px !important;
		border-radius: 50%;
		color: white;
	}

	.yoast-logo.svg {
		float: left;
		width: 26px;
		height: 30px;
		background-repeat: no-repeat;
		background-position: 0 6px;
		background-size: 20px;
		background-image: url('');
	}
}

.yoast-issue-counter {
	background-color: #d54e21;
}

#wpadminbar #wp-admin-bar-wpseo-licenses .ab-item {
	color: #f18500;
}

@media screen and ( max-width: 782px ) {
	.adminbar-seo-score {
		margin: 16px 10px 0 2px !important;
	}

	#wpadminbar {
		#wp-admin-bar-wpseo-menu {
			display: block;
			position: static;
		}

		.yoast-logo.svg {
			width: 52px;
			height: 46px;
			background-position: 50% 8px;
			background-size: 30px;
		}

		// Target just the first counter in the top level.
		.yoast-logo + .yoast-issue-counter {
			margin-left: -5px;
			margin-right: 10px;
		}

		// Target just the second counter in the sub-menu.
		.ab-sub-wrapper .yoast-issue-counter {
			vertical-align: text-top;
			position: relative;
			top: -5px;
		}

		.yoast-issue-added,
		.yoast-issue-added:hover {
			top: 46px;
			white-space: normal;
			line-height: 1.8;
		}
	}

	#wp-admin-bar-wpseo-menu.menupop .ab-sub-wrapper #wp-admin-bar-wpseo-kwresearch,
	#wp-admin-bar-wpseo-menu.menupop .ab-sub-wrapper #wp-admin-bar-wpseo-settings {
		display: none;
	}
}
